<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>首页</title>

    <link th:href="@{/AmazeUI-2.4.2/assets/css/amazeui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/AmazeUI-2.4.2/assets/css/admin.css}" rel="stylesheet" type="text/css"/>

    <link th:href="@{/basic/css/demo.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/hmstyle.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/AmazeUI-2.4.2/assets/js/jquery.min.js}"></script>
    <script th:src="@{/AmazeUI-2.4.2/assets/js/amazeui.min.js}"></script>
</head>
<body>
<th:block th:include="common :: header2"></th:block>
<th:block th:include="common :: category"></th:block>

<div class="shopNav" th:fragment="slideall2">
    <div class="slideall" style="padding-top: 0px;">
        <!--侧边导航 -->
        <div id="nav" class="navfull">
            <div class="area clearfix">
                <div class="category-content" id="guide_2">
                    <div class="category">
                        <ul class="category-list" id="js_climit_li">
                            <li class="appliance js_toggle relative first" th:each="categoryListOne:${list}">
                                <div class="category-info">
                                    <h3 class="category-name b-category-name"><i><img
                                            src="../static/images/cookies.png"></i><a class="ml-22"
                                                                                      title=""
                                                                                      th:text="${categoryListOne.name}"></a>
                                    </h3>
                                    <em>&gt;</em></div>
                                <!---->
                                <div class="menu-item menu-in top">
                                    <div class="area-in">
                                        <div class="area-bg">
                                            <div class="menu-srot">
                                                <div class="sort-side">
                                                    <dl class="dl-sort">
                                                        <dt><span title="饼干">家具</span></dt>
                                                        <dd th:each="categoryListTwo:${categoryListOne.children}">
                                                                <a th:href="@{'/product/list/'+${categoryListTwo.id}}"><span
                                                                    th:text="${categoryListTwo.name}"></span></a>
                                                        </dd>
                                                    </dl>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <!--轮播 -->
        <script type="text/javascript">
            (function () {
                $('.am-slider').flexslider();
            });
            $(document).ready(function () {
                $("li").hover(function () {
                    $(".category-content .category-list li.first .menu-in").css("display", "none");
                    $(".category-content .category-list li.first").removeClass("hover");
                    $(this).addClass("hover");
                    $(this).children("div.menu-in").css("display", "block")
                }, function () {
                    $(this).removeClass("hover")
                    $(this).children("div.menu-in").css("display", "none")
                });
            })
        </script>


        <div class="clear"></div>
    </div>
    <script type="text/javascript">
        if ($(window).width() < 640) {
            function autoScroll(obj) {
                $(obj).find("ul").animate({
                    marginTop: "-39px"
                }, 500, function () {
                    $(this).css({
                        marginTop: "0px"
                    }).find("li:first").appendTo(this);
                })
            }

            $(function () {
                setInterval('autoScroll(".demo")', 3000);
            })
        }
    </script>

</div>
<div th:fragment="slideall">
    <div class="menu_bg">
        <div class="menu">
            <div class="nav">
                <div class="nav_t">全部商品分类</div>
                <div class="leftNav">
                    <ul>
                        <li th:each="levelOne:${Categorylist}">
                            <div class="fj">
                                <span class="n_img"></span> <span class="fl" th:text="${levelOne.name}"></span>
                            </div>
                            <div class="zj">
                                <div class="zj_l ">
                                    <div class="zj_l_c" th:each="levelTwo:${levelOne.children}">
                                        <h2>
                                            <dt><span title="家具">家具</span></dt>
                                            <a th:href="'/product/'+${levelTwo.id}" th:text="${levelTwo.name}"></a>
                                        </h2>
<!--                                        <a th:href="'/product/list/three/'+${levelTwo.id}"  th:text="${levelTwo.name}"></a>-->
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            //商品类目
            $(".leftNav ul li").hover(
                function(){
                    $(this).find(".fj").addClass("nuw");
                    $(this).find(".zj").show();
                }
                ,
                function(){
                    $(this).find(".fj").removeClass("nuw");
                    $(this).find(".zj").hide();
                }
            )
        });
    </script>
</div>
</body>


</html>